<template>
	<view :class="{'gantchart-activer':mainshow,'weixin-activer':weixinShow}"  class="gantchart" :style="{'--width-head':tableHead,'--boday-height': bodayHeight,'--head-height':headHeight,'--head-width':headWidth,'--window-height-origin':windowHeight,'--window-width-origin':windowWidth,'--trans-form':transform}">
		<view class="chart-table">
			<!-- 左边头部 -->
			<view class="tbody-left">
				<!-- 描述 -->
				<view class="describe-head mian-border"  @click="showClose">
					<view class="head-text-top">工序</view>
					<view class="head-text-bottom">时间</view>
				</view>
				<!-- 项目进度工序 -->
				<view class="working-procedure mian-border" v-for="item in headList" :key="item.actBegin">
					<view class="name-head">{{item.processName}}</view>
					<view class="name-head">{{item.actBeginName}}</view>
				</view>
			</view>
			<!-- 左边甘特图数据 -->
			<view class="tbody-rigth">
				<!-- 左边时间表头 -->
				<view class="time-flex-rigth">
					<view class="time-modle" v-for="(item) in rigthList" :key="item.key">
						<view class="time-head mian-border">
							<text class="margin-text-head">{{item.key}}</text>
						</view>
						<view class="day-num">
						  <view v-for="item in item.list" class="head-dayweek mian-border" :key="item.keylist" :class="{'head-dayweek-activer':item.showClose}">
							<view class="week-top">{{item.weekTime}}</view>
							<view class="day-bottom">{{item.dayTime}}</view>
						  </view>
						</view>
					</view>
				</view>
				<!-- 甘特图数据 -->
				<view class="body-chart">
				  <view  v-for="item in dataList" class="chart-absolute" :key="item.actBegin">
					<view v-for="item in totalNum" class="border-color mian-border" :key="item"></view>
					<view class="width-border" :style="{left: item.leftAddress,width: item.widthadd}"></view>
				  </view>
				</view>
			</view>
		</view>
		<!-- <view class="main-show">
			<uni-icons :type="mainshow ? 'closeempty':'plusempty'" size="30"></uni-icons>
		</view> -->
	</view>
</template>

<script>
	import {timeyear,getDiffDay,datemonth,getNowTime} from './timeModeth';
	import {timeSplice} from '@/config/CurrentRouter.js';

	export default {
		data () {
			return {
				chartType: '', // 1 是环氧甘特图，其余不是
				mainshow: false, // 屏幕旋转
				weixinShow: false,// 屏幕旋转
				tableHead: '90px', // 左边宽度
				bodayHeight: '30px', // 盒子的高度
				headHeight: '20px', // 年月高度
				headWidth: '30px', // 甘特图宽度
				windowHeight: '375px', // 系统高度
				windowWidth: '375px', // 系统宽度
				transform: '187.5px', // 旋转偏移量
				chartId: '', // 项目id
				headList: [], // 项目描述
				totalNum: 0,// 最大值和最小值的差数
				rigthList: [],
				dataList: []
			}
		},
		onLoad(option) {
			var _that = this
			uni.getSystemInfo({
				success: function (res) {
					console.log(res)
					_that.windowHeight =  `${res.windowHeight - 2}px` 
					_that.windowWidth = `${res.windowWidth  - 2}px`  
					_that.transform = `${res.windowWidth / 2 }px`
					_that.mainshow = true
					console.log(_that.windowHeight,_that.windowWidth,_that.transform,9999999999);
				}
			});
			if(!option.code) {
				uni.navigateBack({
					delta: 1
				})
				return
			}
			this.chartId = option.code
			this.chartType = option.type ? option.type : '0'
			this.chartProcess()
			uni.setNavigationBarTitle({
				title: option.name
			});
			uni.showLoading({
				title: '加载中···'
			})
		},
		onUnload() {
			uni.hideLoading()
		},
		onPageScroll(option) {
			console.log(option)
		},
		methods: {
			// 	切换数据
			showClose() {
				this.mainshow = !this.mainshow
				// this.weixinShow = !this.weixinShow
			},
			/**
			   * 时间： 2022/8/11，An
			   * 功能： 获取工序、甘特图
			   * 接口:  'api/Project/GetPrjProcess'，
			   * 参数： prjInfoId-->项目id
			*/
			chartProcess() {
				if(!this.chartId) {
					uni.navigateBack({
						delta: 1
					})
					return
				}
				this.$http.get(`api/Project/GetPrjProcess?prjInfoId=${this.chartId}&type=${this.chartType}`).then((res) => {
					console.log(res,'-----------------')
					if(!Array.isArray(res.data) || res.data.length <= 0) {
						uni.hideLoading()
						return
					}
					// 防止结束时间为null的时候，最大值应该为当期时间
					res.maxTime = res.data.some(code => !code.actEnd) ? getNowTime() : res.maxTime
					
					// 初始化数据，防止没有结束时间，没有结束时间默认给当前时间
					let dataMapList = []
					res.data.forEach(code => {
						if(code.actBegin) {
							dataMapList.push({
								...code,
								actEnd: code.actEnd ? code.actEnd: getNowTime()
							})
						}
					})
					// 获取项目名称数据
					this.headList = dataMapList.map(item => {
						let actBegin = new Date(item.actBegin) // 开始时间
						let actEnd = new Date(item.actEnd) // 结束时间
						console.log(item,'----',actEnd.getDate())
						actBegin = `${actBegin.getMonth() + 1}/${actBegin.getDate()}`
						actEnd = `${actEnd.getMonth() + 1}/${actEnd.getDate()}`
						return {
							...item,
							actBeginName: `${actBegin}-${actEnd}`,
						}
					})
					// 计算绘画时间线
					let starttime = datemonth(timeSplice(res.maxTime,1),timeSplice(res.minTime,1)) // 获取最小时间和最大时间之间的月数
					let minTime = new Date(res.minTime) // 创建最小时间对象
					let yarn = minTime.getFullYear() // 获取当前最小的年份
					let day = minTime.getMonth() + 1 // 获取当前的月份
					let rigthList = []
					for(let i = minTime.getMonth() + 1; i <= starttime + minTime.getMonth() + 1;i++) {
						// debugger
						if(i > 12 && i%12 == 1) {
							yarn++
							day = 1
						} else if(i > 12) {
							day++
						} else {
							day = i
						}
						// console.log(timeyear(yarn,day))
						rigthList = rigthList.concat(timeyear(yarn,day))
					}
					this.rigthList = rigthList
					
					
					if(!Array.isArray(rigthList) || rigthList.length <= 0) {
						uni.hideLoading()
						return
					}
					// 获取一列有多数个数
					let totalNum = 0 
					rigthList.forEach((nex,pro) => {
						totalNum +=nex.list.length
					})// 时间差
					this.totalNum = totalNum
					
					// 获取当前数据的位置和宽度
					var minadd = rigthList[0].key+'-01T10:15:54.703' // 获取第一个时间
					var dataList = dataMapList.map((code,index) => {
						// 获取最小时间到当前数据的最小时间的时间差，用于计算当期数据的位置
						let leftposition = getDiffDay(timeSplice(minadd,1),timeSplice(code.actBegin,1))
						// 获取当前数据开始和结束时间的时间差，用于计算当期数据的宽度
						let widthtion = getDiffDay(timeSplice(code.actEnd,1),timeSplice(code.actBegin,1)) + 1
						let viewWidth = Number(this.headWidth.split('px')[0]) + 1
						console.log(leftposition,widthtion,viewWidth)
						console.log('----------------------------')
						console.log(typeof leftposition,typeof widthtion,typeof viewWidth)
						return {
							...code,
							leftAddress: `${leftposition * viewWidth}px`,
							widthadd: `${widthtion * viewWidth}px`
						}
					})
					console.log(dataList)
					this.dataList = dataList
					setTimeout(() => {
						uni.hideLoading()
					},2000)
				}).catch(err => {
					uni.hideLoading()
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.gantchart-activer {
		transform: rotate(90deg);
		width: var(--window-height-origin);
		height: var(--window-width-origin);
		transform-origin: var(--trans-form) center;
		overflow: auto;
	}
	// .weixin-activer {
	// 	margin-top: var(--status-bar-height);
	// }
	.gantchart {
		background-color: #fff;
		line-height: normal;
		font-size: 12px;
		.chart-table {
			display: flex;
			position: relative;
			border-top: 2rpx solid #e4e4eb;
			border-left: 2rpx solid #e4e4eb;
		}
		.mian-border {
			border-right: 2rpx solid #e4e4eb;
			border-bottom: 2rpx solid #e4e4eb;
		}
		.margin-text-head {
			margin-left: 30rpx;
		}
		.tbody-left {
			.describe-head {
				position: relative;
				height: calc(var(--boday-height) + var(--head-height) + 1px);
				width: var(--width-head);
				background-image: linear-gradient(to bottom left, white 50%, #e4e4eb, white 51%);
				// position: sticky;
				// top: 0;
				// z-index: 999;
				// background-color: #fff;
				.head-text-top {
				  position: absolute;
				  left: 18rpx;
				  bottom: 0;
				}
				.head-text-bottom {
				  position: absolute;
				  right: 18rpx;
				  top: 0;
				}
			}
			.working-procedure {
				height: calc(var(--boday-height));
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
			}
	    }
		.tbody-rigth {
			width: 100%;
			overflow: auto;
			.time-flex-rigth {
				display: flex;
				// position: sticky;
				// top: 0;
				// z-index: 999;
				.time-modle {
					background-color: #fff;
				}
				.time-head {
					text-align: left;
					height: calc(var(--head-height));
				}
				.day-num {
					display: flex;
				}
				.head-dayweek {
					min-width: var(--head-width);
					height: calc(var(--boday-height));
				}
				.head-dayweek-activer {
					color: #e4e4eb;
				}
				.week-top {
					text-align: right;
					transform: scale(0.8);
				}
				.day-bottom {
					font-weight: bold;
				}
			}
			.body-chart {
				.chart-absolute {
					display: flex;
					width: 100%;
					position: relative;
				}
				.border-color {
					min-width: var(--head-width);
				    height: calc(var(--boday-height));
				}
				.width-border {
					position: absolute;
					width: 100px;
					height: calc(var(--boday-height) / 1.5);
					background-color: #49c788;
					top: 15%;
				}
			}
		}
		.main-show {
			position: fixed;
			right: 2%;
			bottom: 5%;
			z-index: 9999;
		}
	}
</style>